<template>
	<view class="e-p-20 app-transform">
		<view class="e-radius-20 bg-white e-p-20 e-m-b-20 e-rela">
			<view class="flex e-m-b-20" style="display: flex;">
				<image :src="$staticPath('transform.png')" class="img-200" mode=""></image>
				<view class="e-flex-1 e-p-l-20">
					<view class="e-font-30 c-333 w-500 e-m-b-20">兑换包</view>
					<view class="e-font-26 e-m-b-4" style="color:#808080">兑换包：{{info.minExchange||0}}~{{info.maxExchange || 0}}</view>
					<view class="e-font-26" style="color:#808080">时间：{{info.releaseDay || 0}}</view>
				</view>
			</view>
			<view class="e-p-l-20 e-p-t-28 e-p-b-30 e-flex e-font-30 c-333">
				<text class="e-flex-1">价值手串数量</text>
				<text>{{info.accountMoney || 0}}</text>
			</view>
			<view class="app-transform__logbox" @tap="$goTo('/pages/points/log')">
				<text class="c-white e-font-28">兑换记录</text>
			</view>
		</view>
		<view class="e-radius-20 bg-white e-flex e-p-l-30 e-p-t-38 e-p-r-30 e-p-b-40 e-m-b-40">
			<text class="e-flex-1 e-font-30 c-333">输入兑换数</text>
			<view class="">
				<input type="number" v-model="num" :placeholder="`请输入${info.applyMultiple || 1}的整数`" style="text-align: right;"/>
			</view>
		</view>
		<view class="app-transform__btn e-flex-xy-center" @tap="submit">
			<text class="e-font-32  w-500 c-white">确认兑换</text>
		</view>
	<password-popup ref="passwordPopupRef" :show="passwordShow" @close="passwordShow = false"
		@confirm="passwordPay"></password-popup>
	</view>
</template>

<script setup>
	import {gfPre,applyGf,postSupperAppLogin} from '@/common/request/api'
	import { ref, computed } from 'vue';
	import { useUser } from '@/common/stores';
	import { storeToRefs } from 'pinia';
	import { onShow } from '@dcloudio/uni-app';
	import {  useCurrentInstance,useLogin } from '@/common/hooks';
	
	const ctx = useCurrentInstance();
	const { userInfo,isLogin } = storeToRefs(useUser());
	const { login } = useLogin();
	
	const info = ref({})
	const num = ref()
	const passwordShow = ref(false)
	
	const getData=()=>{
		gfPre().then(res =>{
			if (res.code == 200) {
				info.value = res.data
			}
		})
	}
	
	const submit = () => {
		if (!num.value) {
			return ctx.$toastApp('请输入兑换数量')
		}
		if (num.value % info.value.applyMultiple !== 0) {
			return ctx.$toastApp(`请输入${info.value.applyMultiple}的倍数`)
		}
		if (userInfo.value.isPayword) {
			passwordShow.value = true
		} else {
			ctx.$goTo('/pages/public/setting/pay-pwd', {
				type: 1
			})
		}
	}
	const passwordPopupRef = ref();
	// 输入完时密码调用
	const passwordPay = (payPassword) => {
		passwordPopupRef.value?.reset();
		passwordShow.value = false
		applyGf({num:num.value,payPassword}).then(res => {
			if (res.code == 200) {
				num.value = ''
				ctx.$toastApp('兑换成功')
				getData()
			}
		})
	}
	
	
	const appLogin = () => {
		return new Promise((resolve,reject) => {
			// #ifdef APP
			uni.sendNativeEvent(
				'autoLogin',
				{
					msg: 'sendAutoLogin'
				},
				(ret) => {
					let params = {
						code: ret,
						salt: uni.getStorageSync('userSalt')
					};
					postSupperAppLogin(params)
						.then(async (res) => {
							uni.removeStorageSync('userSalt');
							await login(res.data.access_token);
							resolve()
							
						})
						.catch((err) => {
							reject(err);
						})
				}
			);
			return ;
			// #endif
			resolve()
		})
	}
	onShow(async () => {
		if(!isLogin.value){
			await appLogin()
		}
		getData()
	})
	
	

</script>

<style lang="scss" scoped>
	.img-200 {
		width: 200rpx;
		height: 200rpx;
	}
	@include appBem_b(transform) {
		@include appBem_e(btn) {
			height: 100rpx;
			background: #4B68E3;
			border-radius: 50rpx;
		}
		@include appBem_e(logbox) {
			padding: 2rpx 20rpx;
			background-color: #4B68E3;
			border-radius: 0 20rpx 0 20rpx;
			position: absolute;
			top:0;
			right: 0;
		}
	}
</style>